<include file="public/header" />
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">分类</a>
                <a>
                    <cite>分类列表</cite></a>
            </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
  </a>
</div>
<div class="layui-input-inline layui-show-xs-block">
  <div class="demoTable" >
    搜索：
    <div class="layui-inline">
      <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
      <button class="layui-btn" >总金额{$total_money}</button>
      <button class="layui-btn" >实际打款{$actual_amount}</button>
      <button class="layui-btn" >手续费{$commission}</button>
</div>

</div>

<table id="demo" lay-filter="edit"></table>
<script type="text/html" id="barDemo">
  <!--  <a class="layui-btn layui-btn-xs" lay-event="view">登录</a>-->
  <a class="layui-btn layui-btn-xs" lay-event="callback">手动回调</a>
 <a class="layui-btn layui-btn-xs" lay-event="find">查询状态</a>
 <a class="layui-btn layui-btn-xs" lay-event="download">下载回单</a>
 <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>

  layui.use(['table','util'], function(){

    var table = layui.table
            ,form = layui.form
            ,util = layui.util;

    // //是否启用模板
    var statusTpl = function (d) { //名字需要和上面定义的名字对应上
      let status = d.status;

      let html="";
      if(status ==='待支付'){
          html ='<a href="javascript:;" class="layui-btn">待支付</a> '
      }else if(status ==='已支付'){
          html ='<a href="javascript:;" class="layui-btn layui-btn-warm">已支付</a> '
      }else if(status === '处理中'){
          html ='<a href="javascript:;" class="layui-btn layui-btn-normal">处理中</a> '
      }else if(status === '交易失败'){
          html ='<a href="javascript:;" class="layui-btn layui-btn-danger">交易失败</a> '
      }
      return  html;
    };

      var notifyStateTpl = function (d) { //名字需要和上面定义的名字对应上
          let notify_state = d.notify_state;

          let html="";
          if(notify_state ===0){
              html ='<a href="javascript:;" class="layui-btn">未回调</a> '
          }else if(notify_state ===1){
              html ='<a href="javascript:;" class="layui-btn layui-btn-warm">已回调</a> '
          }else {
              html ='<a href="javascript:;" class="layui-btn layui-btn-normal">未知状态</a> '
          }
          return  html;
      };
    //第一个实例
    table.render({
      elem: '#demo'
      ,url: "{:url('/Order/ajaxList')}" //数据接口
      ,page: true //开启分页
      ,toolbar: '#toolbarDemo'
      ,width:'100%'
      ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      ,totalRow: true // 开启合计行
      ,response: {
        statusName: 'code' //规定数据状态的字段名称，默认：code
        ,statusCode: 200 //规定成功的状态码，默认：0
        ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
        ,countName: 'total' //规定数据总数的字段名称，默认：count
        ,dataName: 'data' //规定数据列表的字段名称，默认：data
      }
      ,cols: [[ //表头
        {type: 'checkbox', fixed: 'left'},
        {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
        ,{field: 'merchant_name', title: '商户名称',width:100, }
        ,{field: 'appid', title: 'appid',width:100, }
        ,{field: 'order_sn', title: '平台订单号',width:200, }
        ,{field: 'out_trade_id', title: '第三方订单号',width:200, }
        ,{field: 'amount', title: '金额',width:80, }
        ,{field: 'actual_amount', title: '实际打款金额',}
        ,{field: 'commission', title: '手续费',}
        ,{field: 'pay_error_json', title: '错误信息',}
        ,{field: 'channel_code', title: '通道代码',}
         ,{field: 'notify_state', title: '是否回调',width:100,templet:notifyStateTpl,unresize: true}
        ,{field: 'status', title: '状态',width:100,templet:statusTpl,unresize: true}
        ,{field: 'create_time', title: '创作时间',width:200,  sort: true}
        ,{fixed: 'right', title:'操作',  width:360,toolbar: '#barDemo'}
      ]]
      ,id: 'testReload'

      // ,parseData: function(res){ //res 即为原始返回的数据
      // return {
      //     "code": 0, //解析接口状态
      //     "msg": res.message, //解析提示文本
      //     "count": res.total, //解析数据长度
      //     "data": res.data.item //解析数据列表
      // };
      // }
    });



    //触发单元格工具事件
    table.on('tool(edit)', function(obj){ // 双击 toolDouble
      var data = obj.data;
      var order_sn= obj.data.order_sn;
      switch (obj.event){
        case 'callback':
            layer.confirm('确认回调嘛？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
            $.ajax({
              type: 'post',
              url: "{:url('/Order/callbackOrder')}",
              data : {order_sn:order_sn},
              dataType: 'json',
              success: function (data) {

                if (data.code == 200) {

                  layer.msg(data.msg, {icon: 1});
                    setTimeout(function () {
                        location.reload();
                    }, 2000);
                } else {
                  layer.alert(data.msg, {icon: 2});
                }
              }
              })
            }, function () {
                layer.closeAll();
            });
          break;
        case 'find':
            $.ajax({
                type: 'post',
                url: "{:url('/Order/findOrder')}",
                data : {order_sn:obj.data.order_sn},
                dataType: 'json',
                success: function (data) {
                    if (data.code == 200) {
                        layer.msg(data.msg, {icon: 1,});
                    } else {
                        layer.alert(data.msg, {icon: 2});
                    }
                }
            })
       break;
          case 'download':
              $.ajax({
                  type: 'post',
                  url: "{:url('/Order/downloadOrder')}",
                  data : {order_sn:obj.data.order_sn},
                  dataType: 'json',
                  success: function (data) {
                      if (data.code == 200) {

                              var fileUrl = data.data.url;

                              // 创建一个临时的<a>标签并模拟点击来触发下载
                              var a = document.createElement('a');
                              a.href = fileUrl;
                              // 可选：设置下载的文件名
                               a.download =data.data.name;
                              document.body.appendChild(a);
                              a.click();
                              document.body.removeChild(a);
                          layer.msg(data.msg, {icon: 1,});
                      } else {
                          layer.alert(data.msg, {icon: 2});
                      }
                  }
              })
              break;
          case 'del':
              layer.confirm('确认要删除？', {
                  btn: ['确定', '取消'] //按钮
              }, function () {
                  $.ajax({
                      type: 'post',
                      url: "{:url('/Order/delOrder')}",
                      data : {order_sn:order_sn},
                      dataType: 'json',
                      success: function (data) {

                          if (data.code == 200) {

                              layer.msg(data.msg, {icon: 1});
                              setTimeout(function () {
                                  location.reload();
                              }, 2000);
                          } else {
                              layer.alert(data.msg, {icon: 2});
                          }
                      }
                  })
              }, function () {
                  layer.closeAll();
              });
              break;
      }

    })
    var $ = layui.$, active = {
      reload: function(){
        var demoReload = $('#demoReload');

        //执行重载
        table.reload('testReload', {
          page: {
            curr: 1 //重新从第 1 页开始
          }
          ,where: {
            keyword: demoReload.val()
          }
        });
      }
    };

    $('.demoTable .layui-btn').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

  });
</script>